<template>
  <div class="layout" id="ScanCodeCell">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar
        title="扫码收集"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>

    <!-- the ScanCode Step -->
    <van-steps :active="active" direction="vertical">
      <van-step>
        <p>步骤一</p>
        <!-- Before Scan -->
        <div class="step-div" v-show="step1" @click="step1 = false">
          <div class="icon-sty">
            <i :class="['iconfont', 'icon-tubiaolunkuo-', 'iconsty']"></i>
          </div>
          <span>扫描科室二维码</span>
        </div>
        <!-- After Scan -->
        <!-- the ScanCode Info for department ScanCode -->
        <div class="after-scan" v-show="!step1">
          <span class="info-title">科室信息</span>
          <div class="the-scan-info">
            <div>
              <span>科室名称:</span>
              <span>XX科室</span>
            </div>
            <div>
              <span>科室代码:</span>
              <span>XX123456</span>
            </div>
            <div>
              <span>科室位置:</span>
              <span>XX医院XX楼XX层XX科室XX号</span>
            </div>
            <div>
              <span>扫码时间:</span>
              <span>2020年8月21日 11:51</span>
            </div>
          </div>
          <div style="text-align:center;">
            <van-button
              plain
              type="info"
              size="small"
              :style="{ width: 30 + 'vw' }"
              @click="step1 = true"
              >重新扫描</van-button
            >
          </div>
        </div>
      </van-step>

      <van-step>
        <p>步骤二</p>
        <!-- Before Scan -->
        <div class="step-div" v-show="step2"  @click="step2 = false">
          <div class="icon-sty">
            <i :class="['iconfont', 'icon-tubiaolunkuo-', 'iconsty']"></i>
          </div>
          <span>扫描文件二维码</span>
        </div>
        <!-- After Scan -->
        <!-- the ScanCode Info for File ScanCode -->
        <div class="after-scan" v-show="!step2">
          <span class="info-title">交接人信息</span>
          <div class="the-scan-info">
            <div>
              <span>交接人姓名:</span>
              <span>张三</span>
            </div>
            <div>
              <span>交接人职位:</span>
              <span>XX职位</span>
            </div>
            <div>
              <span>联系方式:</span>
              <span>15883723040</span>
            </div>
            <div>
              <span>扫码时间:</span>
              <span>2020年8月21日 11:51</span>
            </div>
          </div>
          <div style="text-align:center;margin-bottom:10px">
            <van-button
              plain
              type="info"
              size="small"
              :style="{ width: 30 + 'vw' }"
              @click="step2 = true"
              >重新扫描</van-button
            >
          </div>
        </div>
      </van-step>
    </van-steps>
    <van-button
      type="primary"
      v-show="step1 == false && step2 == false"
      :style="{ width: 100 + 'vw', margin: '20px 0' }"
      to="/ScanColl/getWeight"
      >开始称重</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      step1: true,
      step2: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      // Toast("按钮");
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  width: 100vw;
  min-height: 100vh;
  background-color: #dcdfe6;

  & .step-div {
    height: 15vh;
    line-height: 15vh;
    background-color: #ffffff;
    padding-right: 10px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-sty {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #000000;
      line-height: 50px;
      margin-right: 10px;
      background-color: #f2f6fc;
      .iconsty {
        font-size: 30px;
      }
    }
  }
  .after-scan {
    height: 250px;
    //   padding-right: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    .info-title {
      display: block;
      background-color: #f2f6fc;
      height: 50px;
      line-height: 50px;
      font-size: 1rem;
      padding-left: 10px;
      color: #666666;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  }
  .the-scan-info {
    display: flex;
    flex-direction: column;
    padding: 10px;
    div {
      display: flex;
      span:nth-child(1) {
        margin-right: 15px;
        font-weight: 600;
        min-width: 20vw;
      }
      & span {
        margin-bottom: 15px;
        color: #666;
      }
    }
  }
}

#ScanCodeCell {
  .van-steps {
    background-color: #dcdfe6;
  }
  .van-step--vertical {
    padding: 10px 10px 0px 0;
  }
}
</style>
